<script lang="ts" setup>
import { PropType, ref } from 'vue'
import { Website } from '@/apis/website/websites.ts'
import { remove_website } from '@/apis/website/remove_website.ts'

const props = defineProps({
  show: {required: true, type: Boolean},
  index: {required: true, type: Number},
  website: {required: true, type: Object as PropType<Website>}
})

const emits = defineEmits(['update:show', 'removed'])
const loading = ref(false)

async function close(): Promise<void> {
  emits('update:show', false)
}

async function remove(): Promise<void> {
  loading.value = true
  const response = await remove_website(props.website!.hostname)
  loading.value = false

  if (0 !== response.code) {
    window.$message.error(response.message)

    return
  }

  emits('removed', props.index)
  await close()
}
</script>

<template>
  <n-modal :closable="false" :close-on-esc="false" :mask-closable="false" :show="props.show" class="website-remove-modal" transform-origin="center">
    <n-card>
      <n-space vertical>
        <div>
          <n-text>确定要删除站点</n-text>
          <n-text type="error">&nbsp;{{ props.website.hostname }}&nbsp;</n-text>
          <n-text>吗，删除后不可恢复，请谨慎操作</n-text>
        </div>
        <div>
          <n-space align="center" justify="center">
            <n-button size="small" type="primary" @click="close">取消</n-button>
            <n-button :loading="loading" size="small" type="error" @click="remove">删除</n-button>
          </n-space>
        </div>
      </n-space>
    </n-card>
  </n-modal>

</template>

<style scoped>

.website-remove-modal {
  width: 65vw;
}
</style>
